---
import { Image } from 'astro:assets'

import { Button, Collapse, Icon } from 'astro-pure/user'
import PageLayout from '@/layouts/CommonPage.astro'
import ProjectSection from '@/components/projects/ProjectSection.astro'
import Sponsors from '@/components/projects/Sponsors.astro'
import Sponsorship from '@/components/projects/Sponsorship.astro'
import alipay from '@/assets/alipay-qrcode.jpg'
import KeyIcon from '@/assets/icons/key.svg'
import wechat from '@/assets/wechat-qrcode.jpg'

const headings = [
  { depth: 2, slug: 'theme', text: 'Theme' },
  { depth: 2, slug: 'programs', text: 'Programs' },
  { depth: 2, slug: 'learnings', text: 'Learnings' },
  { depth: 2, slug: 'others', text: 'Others' },
  { depth: 2, slug: 'gpg-signature', text: 'GPG Signature' },
  { depth: 2, slug: 'sponsorship', text: 'Sponsorship' }
]
---

<PageLayout title='Projects' {headings} view>
  <p>Github Activities:</p>
  <p>
    <Image
      src='https://ghchart.rshah.org/659eb9/cworld1'
      alt='github activities'
      inferSize
      loading='lazy'
    />
  </p>
  <p>
    If you think it would be useful or interesting to collaborate on a project, you can donate to
    support my work or contact me to discuss a project.
  </p>
  <Button title='Checkout sponsorship' class='w-fit' href='#sponsorship'>
    <Icon class='size-5' name='receive-money' slot='before' />
  </Button>

  <h2 id='theme'>Theme</h2>
  <ProjectSection
    projects={[
      {
        name: '🍭 Astro-theme-pure',
        description: 'A simple, clean but powerful blog theme build by astro.',
        links: [
          { type: 'github', href: 'https://github.com/cworld1/astro-theme-pure' },
          { type: 'site', href: 'https://github.com/cworld1/astro-theme-pure' },
          {
            type: 'doc',
            href: 'https://github.com/cworld1/astro-theme-pure/blob/main/src/content/blog/customize/index.md'
          }
        ]
      }
    ]}
  />

  <h2 id='programs'>Programs</h2>
  <ProjectSection
    projects={[
      {
        name: '📒 Notie',
        description:
          'Android note App complies with Material You specifications, developed using Java',
        links: [
          { type: 'github', href: 'https://github.com/cworld1/notie' },
          {
            type: 'release',
            href: 'https://github.com/cworld1/notie/releases'
          }
        ]
      },
      {
        name: '💄 PKU Art',
        description: 'A script to beautify pku course website',
        links: [
          { type: 'github', href: 'https://github.com/zhuozhiyongde/pku-art' },
          { type: 'site', href: 'https://github.com/zhuozhiyongde/pku-art' },
          { type: 'doc', href: 'https://docs.arthals.ink/docs/pku-art' }
        ]
      }
    ]}
  />
  <Collapse title='Some old projects'>
    <ProjectSection
      projects={[
        {
          name: 'Search Switcher',
          description: 'Add links to each other in search engines',
          links: [{ type: 'github', href: 'https://github.com/cworld1/search-switcher' }]
        },
        {
          name: 'Pure Baidu',
          description: 'Baidu search page beautification module',
          links: [
            { type: 'doc', href: 'https://cworld0.com/blog/pure-baidu' },
            { type: 'site', href: 'https://userstyles.org/styles/173673/pure' }
          ]
        }
      ]}
    />
  </Collapse>

  <h2 id='learnings'>Learnings</h2>
  <ProjectSection
    class='my-2'
    projects={[
      {
        name: 'Rust Learning',
        description: 'Some notes and code about CWorld learning Rust',
        links: [{ type: 'github', href: 'https://github.com/cworld1/rust-learning' }]
      },
      {
        name: 'CS 213 Learning',
        description: 'Notes, code and experiences for Introduction to Computer Systems course',
        links: [
          {
            type: 'github',
            href: 'https://github.com/zhuozhiyongde/Introduction-To-Computer-System-2023Fall-PKU'
          }
        ]
      }
    ]}
  />

  <h2 id='others'>Others</h2>
  <ProjectSection
    projects={[
      {
        name: 'CWorld',
        description: "CWorld's Github",
        links: [{ type: 'github', href: 'https://github.com/cworld1' }]
      },
      {
        name: 'Arthals',
        description: 'Arthals Github',
        links: [{ type: 'github', href: 'https://github.com/zhuozhiyongde' }]
      }
    ]}
  />

  <!-- gpg signature -->
  <h2 id='gpg-signature'>GPG Signature</h2>
  <p>
    You can verify the authenticity of the files I signed by checking the GPG signature. My GPG key
    is <code>114514</code>, and you can find it on the opengpg key servers or download from it.
  </p>
  <Button href='https://keys.openpgp.org/search?q=114514' title='Checkout my key' target='_blank'>
    <KeyIcon class='size-5' slot='before' />
  </Button>

  <!-- sponsorship -->
  <h2 id='sponsorship'>Sponsorship</h2>
  <p>Please leave a message or contact me proactively after sponsorship.</p>
  <Sponsorship
    methods={[
      { name: 'WeChat', icon: 'wechat-pay', image: wechat },
      { name: 'Alipay', icon: 'alipay', image: alipay }
    ]}
  />
  <p>Thanks to the following sponsors:</p>
  <Sponsors
    sponsors={[
      { name: 'C*a（酷安@暴走の蜗牛）', amount: '2.00', date: '2019-07-02' },
      { name: '华雄(QQ：1300****71)', amount: '5.00', date: '2019-12-30' },
      { name: '◌(QQ：1934****45)', amount: '3.00', date: '2019-12-30' },
      { name: 'Anonymous', amount: '20.00', date: '2022-04-06' }
    ]}
  />
</PageLayout>

<style>
  .sponsorship-card {
    & .sponsorship-card-img {
      opacity: 0.3;
      --un-blur: blur(4px);
      filter: var(--un-blur);
    }

    &:hover {
      & .sponsorship-card-icon {
        opacity: 0;
      }
      & .sponsorship-card-img {
        opacity: 1;
        --un-blur: blur(0);
      }
    }
  }
</style>
